<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
    <title>客户区域列表</title>
    <meta name="decorator" content="default"/>
    <link rel="stylesheet" href="${ctxStatic}/bootstrap-table/bootstrap-table.css">
    <script src="${ctxStatic}/bootstrap-table/bootstrap-table.js"></script>
    <script src="${ctxStatic}/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <script src="${ctxStatic}/bootstrap-table/config.js"></script>
</head>
<body>
<ul class="nav nav-tabs">
    <li class="active"><a href="javascript:void(0);">客户状态列表</a></li>
    <shiro:hasPermission name="sys:customerStatus:edit">
        <li><a href="${ctx}/sys/customerStatus/form">客户状态添加</a></li>
    </shiro:hasPermission>
</ul>
<form id="searchForm" action="${ctx}/sys/customerStatus/listAjaxData" method="post" class="breadcrumb form-search">
    <ul class="ul-form">
        <ul class="ul-form">
            <li>
                <div class="input-prepend">
                    <span class="add-on">名称</span>
                    <input name="content" type="text" class="input-medium" placeholder="请输入名称"/>
                </div>
            </li>
            <li class="btns">
                <button id="search" class="btn btn-small btn-primary" type="button">
                    查询<span class="icon-search icon-white"></span>
                </button>
            </li>
            <li class="clearfix"></li>
        </ul>

    </ul>
</form>


<table id="contentTable" data-url="${ctx}/sys/customerStatus/listAjaxData">
    <thead>
    <tr>
        <th data-field="state" data-align="center" data-formatter="indexFormatter"></th>
        <th data-field="content" data-align="center">名称</th>
        <th data-field="dateCreated" data-align="center">创建时间</th>
        <th data-field="lastUpdated" data-align="center">更新时间</th>
        <th data-field="operation" data-align="center" data-formatter="reder">操作类型</th>
        <th data-field="version" data-align="center">修改次数</th>
        <th data-field="operate" data-align="left" data-formatter="operateFormatter" data-events="operateEvents">操作</th>
    </tr>
    </thead>
</table>
<script type="text/javascript">
    $(document).ready(function () {
        closeTip();
        $("#contentTable").bootstrapTable(
                $.fn.BTConfigSimple({
                    pageList: [30, 50, 100],
                    pageSize: 30,
                    sortName: "id",
                    detailView:true,
                    userQuery:function(){
                        return $('#searchForm').refreshByForm().query;
                    },
                    detailFormatter: function (index, row) {
                        var context = "";
                        $.ajax({
                           url: "${ctx}/sys/customerStatus/detail",
                           async:false,
                           type: "post",
                           data: {customerStatusId: row.id},
                           dataType: "json",
                           success: function (data) {
                               if(data.state){
                                   var array = [];
                                   array.push('<table style="border: 1px solid #ccc;margin-left:25px;font-size: 11px;">');
                                   array.push('<tr><th>序号</th><th>内容</th><th>创建时间</th><th>修改时间</th></tr>');
                                   $(data.list).each(function(i,item){
                                       array.push('<tr><td>'+i+'</td><td>'+item.causeDesc+'</td>');
                                       array.push('<td>'+item.dateCreated+'</td><td>'+item.lastUpdated+'</td>');

                                       array.push('</tr>');
                                   });
                                   array.push('</table>')
                                   context = array.join('');
                               }else{
                                   context = data.message;
                               }
                           },
                           error: function (data, state, error) {
                               alertx(data.responseText, null, '请求错误');
                           }
                       });
                       return context;
                    }
                }));

        $("#search").click(function () {
            refresh();
        });
    });
    //全局函数部分
    function refresh() {
        $("#contentTable").bootstrapTable(
                'refresh',
                $("#searchForm").refreshByForm());
    }

    function indexFormatter(value, row, index) {
        return index+1;
    }
    function reder(value){
        return value.replace("CREATE","创建")
                .replace("DONE","成单")
                .replace("END","结束");
    }

    function operateFormatter(value, row, index) {
        var array = [];
        array.push('<a class="edit" href="${ctx}/sys/customerStatus/form?id=' + row.id + '" title="编辑/查看">');
        array.push('<i class="icon icon-edit"></i>');
        array.push('</a>');
        <shiro:hasPermission name="sys:customerStatus:edit">
        array.push('  ');
        array.push('<a class="remove" href="javascript:void(0)" title="删除">');
        array.push('<i class="icon icon-remove"></i>');
        array.push('</a>');
        </shiro:hasPermission>
        return array.join('');
    }

    var operateEvents = {
        'click .remove': function (e, value, row, index) {
            confirmx("您确认要删除记录[" + row.content + "]?",
                 function () {
                     $.ajax({
                        url: "${ctx}/sys/customerStatus/delete",
                        type: "post",
                        data: {id: row.id},
                        dataType: "json",
                        success: function (data) {
                            if (data.state == true) {
                                showTip(data.message);
                                refresh();
                            } else {
                                alertx(data.message);
                            }
                        },
                        error: function (data, state, error) {
                            alertx(data.responseText, null, '请求错误');
                        }
                    });
                 });
        }
    };

</script>
</body>
</html>